<!--
 * @Descripttion: 验房
 * @version: 1.0
 * @Author: 狸猫
 * @Date: 2023-11-25 14:29:36
 * @LastEditors: 狸猫
 * @LastEditTime: 2024-05-11 14:15:37
-->
<template>
  <div class="content">
    <el-dialog
      :title="title"
      :visible.sync="value"
      width="800px"
      append-to-body
      :before-close="close"
    >
      <el-form :model="form" ref="form" :rules="rules">
        <el-form-item label="房屋状态" prop="houseState">
          <el-radio-group v-model="form.houseState">
            <el-radio label="1">正常</el-radio>
            <el-radio label="2">有损坏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="损坏详情" prop="facilityDetailList" v-if="form.houseState==2">
          <el-button @click="addfacilities" size="small">添加</el-button>
        </el-form-item>
        <el-table :data="form.facilityDetailList" style="width: 100%" v-if="form.houseState==2">
          <el-table-column prop="name" label="损坏设施">
            <template slot-scope="scope">
              <el-form-item
                label=""
                label-width="0"
                :prop="'facilityDetailList.' + scope.$index + '.name'"
                :rules="[
                  {
                    required: true,
                    message: '请输入房屋设施',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input
                  v-model="
                    form.facilityDetailList[scope.$index].name
                  "
                  placeholder="请输入房屋设施"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="amount1" label="赔偿金额">
            <template slot-scope="scope">
              <el-form-item
                label-width="0"
                label=""
                :prop="'facilityDetailList.' + scope.$index + '.price'"
                :rules="[
                  {
                    required: true,
                    message: '请输入赔偿金额',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input
                  v-model.number="form.facilityDetailList[scope.$index].price"
                  placeholder="请输入"
                  type="number"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="danger"
                size="mini"
                style="margin-bottom: 22px"
                @click="delfacilities(scope.$index)"
              >删除
              </el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-form-item label="房屋图片" prop="changeHouseId">
          <div style="display: flex">
            <div
              v-for="(item, index) in form.houseImgsList"
              :key="index"
              class="item-img-box"
            >
              <img class="up-img" :src="item" alt=""/>
              <span class="item-delete">
                <span @click="handleRemove(index)">
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
            <el-upload
              :action="uploadImgUrl"
              list-type="picture-card"
              :auto-upload="true"
              :headers="headers"
              :accept="'image/*'"
              :on-success="onSuccess"
              :show-file-list="false"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getOrderInfo, orderInspection } from '@/api/order/order'
import { getfacilities } from '@/api/house/unmount'
import { getToken } from '@/utils/auth'

export default {
  name: 'checkHouse',
  components: {},
  computed: {
    customHouseName: {
      get() {
        return this.form.houseId
          ? this.form.estateName +
          this.form.buildingName +
          '栋' +
          this.form.unitName +
          '单元' +
          this.form.roomNumber +
          '房'
          : ''
      },
      set() {
      }
    }
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    orderId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      headers: {
        Authorization: 'Bearer ' + getToken(),
        ['X-Tenantid']: 1
      },
      uploadImgUrl: process.env.VUE_APP_BASE_API + '/common/upload', // 上传的图片服务器地址
      dialogSelectHouseVisible: false,
      title: '验房',
      form: {
        orderId: '1',
        houseImgsList: [],
        facilityDetailList: []
      },
      facilitiesMap: [],
      rules: {
        houseState: [
          { required: true, message: '请选择房屋状态', trigger: 'change' }
        ],
        facilityDetailList: [
          {
            type: 'array',
            required: true,
            message: '请添加损坏设施',
            trigger: 'change'
          }
        ]
      }
    }
  },
  created() {
  },
  mounted() {
    //this.getInfo();
  },
  methods: {
    //获取设施列表
    getfacilitiesFn() {
      getfacilities().then((response) => {
        this.facilitiesMap = response.data
      })
    },
    handleRemove(index) {
      this.form.houseImgsList.splice(index, 1)
    },
    onSuccess(response, file, fileList) {
      this.form.houseImgsList.push(response.url)
    },
    //获取详情
    getInfo() {
      if (!this.orderId) return
      getOrderInfo(this.orderId).then((response) => {
        this.form = response.data
      })
    },
    //删除设施
    delfacilities(index) {
      this.form.facilityDetailList.splice(index, 1)
    },
    //添加设施
    addfacilities() {
      this.form.facilityDetailList.push({
        name: null,
        price: null
      })
    },
    //房间选择回调
    selectHouseCb(data) {
      let houseObj = {
        changeHouseId: data.houseId, //房屋id
        changePremisesAddress: data.premisesAddress //小区地址
      }
      this.form = { ...this.form, ...houseObj }
    },
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          let form = this.form
          form.orderId = this.orderId
          orderInspection(form).then((res) => {
            this.$message.success('验房成功')
            this.$emit('success')
            this.close()
          })

        }
      })
    },
    close() {
      this.$emit('input', false)
    }
  }
}
</script>
<style lang="scss" scoped>
.item-img-box {
  position: relative;
  border: 1px solid #aaaaaa;
  width: 148px;
  height: 148px;
  margin-right: 10px;
  border-radius: 4px;
  overflow: hidden;

  .up-img {
    width: 148px;
    height: 148px;
  }

  .item-delete {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 99;
    transform: translate(-50%, -50%);
    font-size: 32px;
    color: #ff4949;
    cursor: pointer;
  }
}
</style>
